1. 类组件中事件处理函数this指向的问题- 解决方式三

class Test extends React.Component {
    handle = () => {

    }
}


2. props 

作用: 父组件的数据传递给子组件 

传: 

    <子组件 xxx={值}></子组件>  

接收: 

    类组件 this.props
    函数组件 形参props

特点: 
    2.1 props数据是只读的
    2.2 props可以接收任何类型的数据

    接收标签 {this.props.xxx}
    接收组件名 <this.props.xxx />
    接收组件实例 {this.props.xxx}

props校验: 
    作用: 对传入到组件中的数据,进行校验

    使用: 

    Test组件,需要校验props数据, 属性是list,要求必须写,并且要求传入的是一个数组

    import PropTypes from 'prop-types'
    class Test extends React.Component {
        static propTypes = {
            list: PropTypes.array.isRequired
        }
        render(){
            return jsx
        }
    }

props默认值: 
    作用: 没有给指定属性传递数据,默认值生效

    使用: 默认值属性叫做list,值是一个 [1,2,3]
    class Test extends React.Component {
        static defaultProps = {
            list: [1,2,3]
        }
        render(){
            return jsx
        }
    }




3. 操作表单

主要的目的: 就是将表单中的每一个表单项的值,存储到组件的状态里面,为来用户输入的时候,数据就直接存储到了组件的状态, 然后就可以一次性将数据上传给服务器

受控组件: 当一个表单项的值被react数据控制,则这个表单项被称之为受控组件

非受控组件: 教我们如何获取真实dom 

refs 

1. 创建ref对象

const ref对象 = React.createRef()

2. 给标签添加ref属性,值为ref对象
<div ref={ref对象}></div>

3. 当div的真实dom创建完毕,就会赋值给ref对象.current

另一种写法: 
<div ref={(node)=>{
    // 当div的真实dom创建完毕之后,回调函数执行.并且会将真实dom传到这个回调函数中,可以写一个形参接收
    
}}></div>




4. todos案例